Okay.
In this lecture, we're going to learn about the difference between scale and offset and how that can
relate to the anchor point of a gooey object.
The size and the position properties of a gooey object store something called a Udim two.
In the Roblox documentation, it states that the Udim two is a data type representing a two dimensional
value, where each dimension is composed of a relative scale and an absolute offset.
It is the combination of two udims representing the x and y dimensions.
The most common usages of udim two objects are setting the size and position of GUI objects, so it
stores a offset and it stores a scale.
The scale basically represents the percentage on either the y or x axis for a particular GUI object.
For example, if you had a size on the x axis with a scale of 0.5, then the size of that object would
take up half of its parent on the x axis.
So if that guy object was a child of a screen GUI, then that means with a scale of 0.5 on the x axis,
it would take up half of the screen on the x axis.
Now offset represents an absolute size that is based in pixels.
This can be useful to define a constant offset between elements in your GUIs.
Currently with my guy, you can see that the positioning of my guy is being set in scale, while the
size of my guy is being set in offset.
So currently the size of this element will always be 100 by 100 pixels.
No matter how much I scale my screen or shrink my screen, it's always going to remain with a constant
size of 100 pixels.
Now, if I would like my guy to scale with my screen, then I could go ahead and set the offset to zero.
And let's say I want the scale, let's say to be a 10th of the screen on the x axis.
And then I want the Y to be, let's say also a 10th based on the y axis.
So now we have this size here that's taken up 10% of the screen on the x axis and 10% of the screen
on the y axis.
And as I continue to scale my screen, you can see that the size of my guy object is going to match
that scale.
So if I shrink down my y axis, you can see that the total height or the y axis of my guy object is
scaling with my screen to always take up 10% of the screen.
So right now the height of my screen is probably only a couple hundred pixels, and the size of my guy
object is always going to take up a 10th of that size on the y axis.
Now the same thing goes with the position of my object.
If I were to set, let's say, the position point one and point one on both the x and y axis, the current
position is going to be 10% of my screen along the x axis and 10% along the y axis.
Now, if I were to resize my screen, you're going to notice that the gap between the top and where
my guy object is at both on the x and the y axis is going to change.
You can see that the gap is decreasing as I make my screen smaller, and you can see those numbers changing.
So as I continue to resize my screen, the gap is getting larger.
And when I make my screen smaller, the gap is getting smaller as well.
Now, this sometimes may not be desired behavior.
You might want to keep a constant gap between a GUI object and a certain edge of the screen, and this
is where you would use offset instead.
If I set the scale to zero.
So that way my GUI object is in the top corner of my screen, and instead I want it to have an offset
of exactly ten pixels on the x and the y axis.
Now, what's going to happen is I'm going to keep this constant ten pixel offset, no matter what the
scaling or the size of my screen is.
So even if I were to resize my screen, we're always going to be keeping that ten pixel gap.
Same thing goes with the y axis.
If I continue to resize, we're going to continue with that ten pixel gap.
Now of course, the position of our GUI object is going to depend on the anchor point.
So if I were to swap the anchor point to be in the opposite corner.
As you can see now, my GUI object is going to be completely cut off the screen because my current position
is ten pixels and ten pixels.
So it's going to move the anchor point ten pixels down and ten pixels over here, which is what the
position of my anchor point is.
And the problem with that is that most of my frame is being cut off on the screen.
So this is the kind of anchor point that you would want to use if you wanted to display your GUI object
in the opposite corner of the screen.
So let's go ahead and adjust the position this time what we're going to do.
Is, since we don't know what the resolution of the screen is for a particular player, it could be
varying across different devices.
We want to set the scale on the x and y axis to one, so that way it's always going to be in the bottom
right corner of our screen when we have the anchor point set to one and one.
Now, if I wanted to create a constant offset between the corner of the screen, then we would use offset.
So let's subtract ten pixels on the x axis and subtract ten pixels on the y axis.
And now we're going to have a consistent ten pixel gap between the x side of our screen and the Y side
of our screen.
And as I continue to resize, as you can see, it's going to maintain that ten pixel gap.
Now, if I would like my frame to be always in the center of my screen no matter what, then we can
set the anchor point to be something like 0.5 by 0.5.
So now you can see that the anchor point of this object is directly in the center.
And then in order to position it at the center of my screen, we can go ahead and set the position to
a scale of 0.5 on the y axis and 0.5 on the x axis.
And now, no matter what my GUI object is going to be in the exact center of my screen, and then it's
going to scale according to wherever my anchor point is.
So because my anchor point is in the center, you can see both the bottom and the top is scaling to
move towards the anchor point.
But let's say I go ahead and move my anchor point to be zero on the y axis.
So now my anchor point is up there.
If I go and resize my object, you can now see that the bottom portion is resizing towards my anchor
point.
So where are your anchor point is positioned is going to heavily depend on what corner of the screen
you're going to be placing your GUI object, and what direction you want your GUI object to scale in
when you are resizing the screen, or when you're on different resolution screens, because every single
device is going to have a different resolution, a different aspect ratio, and you want to be able
to account for that across multiple different devices.
Now, a question I'll get often is should I use scale or should I use offset?
And the answer is it depends.
Most of the time you're probably going to use a combination of scale and offset depending on what you're
doing.
For example, if you need your object to be in the bottom corner with a consistent ten pixel gap, then
you're going to have to use scale and position, and you're also going to have to use offset to subtract
it by a certain amount of pixels.
When it comes to the size of your GUI object, most of the time you'll be using either scale or offset,
but you can sometimes use both scale and offset when you need to account for some things in particular
situations, and you'll see what I mean in future lectures.
So in the next lecture, we're going to take a look at another GUI object called a scrolling frame.
I'll see you there.